<template>
  <div class="login-content">

      <div class="login">
        <div class="login-title">
            <!-- <p>苏北航务管理处</p> -->
            <p>徐州航务中心电子台账管理系统</p>
        </div>
            <div  class="login-box">

                <div>
                    <p style="font-size:24px;">用户登录</p>
                </div>
                <el-input class="login-item" placeholder="用户名" v-model="user_name">
                    <template slot="prepend">账 号：</template>
                </el-input>
                <el-input  show-password class="login-item" placeholder="密码" v-model="password">
                    <template slot="prepend">密  码： </template>
                </el-input>
                <el-button class="login-item" type="primary" @click="login">登录</el-button>
            </div> 
      </div>
  </div>
</template>

<script>
import {showLoading,hideLoading} from '../components/loading.js'
  export default{
      name: 'Login',
      data(){
          return {
              user_name:"",
              password:"",
          }
      },

      mounted:function(){
        // var serverIp = window.location.hostname;
console.log(this.$ajax.defaults.baseURL);
      },
      methods:{
        login() {
            if(this.user_name==""){
                this.$message({
                    message: '请输入用户名',
                    type: 'warning'
                });
            }else if(this.password==""){
                this.$message({
                    message: '请输入密码',
                    type: 'warning'
                });
            }else if(this.user_name==""&&this.password==""){
                this.$message({
                    message: '请输入登录信息',
                    type: 'warning'
                });
            }else{
                showLoading();
                this.$ajax({
                    method: 'post',
                    url: '/login_big_user',
                    data:{
                        "user_name":this.user_name,
                        "password":this.password
                    }
                }).
                then(res => {    
                    hideLoading()
                    let status=res.data.status  
                    if(status==2){
                        this.$message({
                            message: '登录成功',
                            type: 'success'
                        });
                        this.$store.commit('setUserInfo', res.data.user_info)
                        this.$store.commit('setBigUserInfo', res.data.result)
                        let user_info=res.data.user_info
                        console.log(res.data.user_info)
                        if(user_info.type!="administrator"){
                            if(user_info.sub_department.length>0){
                                let item=user_info.sub_department[0]
                                let user_id=item.user_id
                                let user_name=item.department_name
                                this.$router.push({path:'/index/sub_department_excels',query:{"user_id": user_id,"user_name":user_name}})
                            }else{
                                this.$router.push({path:'/index/my_excels'})
                            }
                        }else{
                            this.$router.push({path:'/index_admin/users'})
                        }


                        
                    }
                    else if(status==0){
                        this.$message.error('密码错误');
                    }else if(status==-1){
                        this.$message.error('用户名错误');
                    }
                }); 
            }
 
            //this.$message.error('用户名错误');
           // this.$message.error('密码错误');
            // this.$message({
            //     message: '登录成功',
            //     type: 'success'
            // });
          // Loading.service({
          //   lock: true,
          //   text: '加载中……',
          //   background: 'rgba(0, 0, 0, 0.7)'
          // });
        },


      },

  }
</script>


<style>
      .login-item{
          margin-top:10%;
      }
      .login-item:nth-child(4){
          margin-top:15%;
      }
    .login-content{
        background:url("../imgs/login-bg2.jpg");
        width: 100%;
        min-height: 100vh;
        background-size: cover;
        display: flex;
        text-align: center;
    }
    .login{
            margin:10% auto 0 auto;
            width: 60%;
    }
    .login-title{
                color: #000;
                font-weight: bold;
                font-size: 36px;
                text-align: center;
            }

            .login-box{
                padding: 5%;
                display: flex;
                flex-direction:column;
                margin:0 auto 0 auto;
                width: 45%;
                background: #ffffff;
                border-radius: 26px;

              }
              .login-row{
                    margin-top: 2%;
                    width: 100%;
                    display: flex;

              }
                .login-row img{
                        width: 50%;
                }
</style>

